
<template>
<!-- 美团对账正常单    美团对账异常单 -->
    <div class="storeInfo stockCorrect">
        <div class="head">
            <div class="headinner">
                <el-form class="headForm" style="width:100%">
                    <el-form-item label="" style="width:70%;margin:0 auto">
                        <el-input v-model="searchparams" placeholder="输入商品名称"></el-input>                   
                    </el-form-item>                   
                </el-form>   
                <ul class="searchResult">
                    <li v-for="sitem in searchinfo" :key="sitem.item_id" @click="chooseLi(sitem)">{{sitem.item_name}}</li>
                </ul> 
            </div>
            <div class="theResult" v-if="liclicked">
                <h4 class="theheader">查询结果</h4>
                <p>
                    <span class="thelable">商品ID</span>
                    <span>{{headData.item_id}}</span>
                </p>
                <p>
                    <span class="thelable">商品信息</span>
                    <span>{{headData.item_name}}</span>
                </p>
                <p style="justify-content: center"><img :src="headData.item_image" alt="" style="width:150px;height:150px;"></p>
                <p>
                    <span class="thelable">当前库存</span>
                    <span>{{headData.item_num}}</span>
                </p>
                <p class="threebtns">
                    <button @click="theClick('in')">修正<span>入库</span></button>
                    <button @click="theClick('out')">修正<span>出库</span></button>
                    <button @click="theClick('lose')">耗损<span>出库</span></button>
                </p>
            </div>
            
        </div> 
        <!-- <p style="line-height:30px;padding-left:20px;margin-top:8px;color:#333" v-if="form.order_id == ''">最近{{total}}笔人工退款订单记录</p> -->
        <!-- table -->
        <div class="tabContainer">
            <el-table :data="tableData" stripe style="width: 100%;text-align:center">
                <!-- 商品编号	门店	商品名称	变化	操作	类型	剩余库存	操作时间	操作人	备注				 -->
                <el-table-column prop="item_id" label="商品编号" fixed ></el-table-column>
                <el-table-column prop="store_name" label="门店"  width="200" > </el-table-column>
                <el-table-column prop="item_name" label="商品名称"  width="150"></el-table-column>
                <el-table-column prop="change_stock" label="变化"></el-table-column>
                <el-table-column prop="operate_type_cn" label="操作"></el-table-column>               
                <el-table-column prop="operate_cn" label="类型" width="120"></el-table-column>
                <el-table-column prop="snap_stock" label="剩余库存" ></el-table-column>
                <el-table-column prop="create_time" label="操作时间" width="200"></el-table-column>
                <el-table-column prop="operate_user" label="操作人" width="200"></el-table-column>
                <el-table-column prop="intro" label="备注" width="200"></el-table-column>

            </el-table>                       
        </div>
        <!-- 分页部分 -->
        <el-pagination
            background
            layout="total, prev, pager, next, jumper"
            @current-change="changePage"
            :page-size="size"
            :current-page.sync="pageNum"
            :hide-on-single-page=true
            :total="total">{{total}}
        </el-pagination>
        <!-- 修正入库/出库 -->
        <el-dialog :title="editTitle" :visible.sync="edit_show" class="business in_or_out">
            <el-form ref="form" :model="editForm" label-width="90px">
                <p style="padding:20px 0">
                    <span>商品：</span>
                    <span>{{headData.item_name}}</span>
                    <span>|</span>
                    <span>当前库存</span>
                    <span>{{headData.item_num}}</span>
                </p>
                <el-form-item :label="editTitle+'数量'">
                    <el-input v-model="editForm.stock" @blur="countstock"></el-input>
                </el-form-item>
                <p class="expretion">原料商品单价为g,1斤=500g</p>
                <uploadCom v-if="editTitle == '损耗'" spantxt="损耗审批单" coverImg="" coverPath="" v-on:throwFilePath="getInputval" style="margin-bottom:20px"></uploadCom>
                <el-form-item :label="editTitle+'原因'">
                    <el-input v-model="editForm.remarks" type="textarea" resize="none"></el-input>
                    <p style="color:#F56C6C"  v-if="editForm.remarks == ''">出库原因/损耗备注不能为空</p>
                </el-form-item>
                <p style="color:#F56C6C">修正后库存：{{countnum}}</p>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="edit_show = false">取 消</el-button>
                <el-button type="primary" @click="confrim">确 定</el-button>
            </div>
        </el-dialog>
       


    </div>
  
</template>
<style lang="scss">
.in_or_out{
    .el-dialog{
       .el-dialog__body {
           max-height: auto;
           overflow-y: initial ;
       }
    } 
}
</style>
<style lang="scss" scoped>
#memuBox{
    .stockCorrect{
        .head{
            flex-direction: column;
        }
        .headinner{
            width:500px;
            margin: 0 auto;
            position: relative;
            .searchResult{
                width: 70%;
                line-height: 40px;
                font-size: 14px;
                box-shadow: 0 0 8px #666;
                // height: 200px;
                position: absolute;
                left:50%;
                transform: translateX(-50%);
                top:50px;
                z-index: 10;
                background: #fff;
                margin-left: 10px;                
                box-sizing: border-box;
                color: #333;
                li{
                  padding: 0 5px;  
                }
                li:hover{
                    background: #ddd;
                }
            }
        }
        .theResult{
            width:420px;
            margin: 20px auto;
            box-shadow: 0 0 15px #ccc;
            
            
            .theheader{
                line-height: 35px;
                background: #f4f6fa;
                padding-left:10px;
            }
            p{
                display: flex;
                line-height: 30px;
                font-size: 14px;
                color: #666;
            }
            .thelable{
                width:120px;
                text-align: right;
                margin-right: 10px;

            }
            .threebtns{
                margin-top: 10px;
                border-top:1px solid #ccc;
                
                button{
                    flex: 1;
                    line-height: 36px;
                    font-size:14px;
                    color:#409EFF;
                    span{
                        font-size:18px;
                    }
                    border: none;
                    background: transparent;
                }
                button:nth-child(2){
                    border-left:1px solid #ccc;
                    border-right: 1px solid #ccc;
                }

            }
        }
    }    
} 
.expretion{
    font-size: 12px;
    color: orange;
    margin-top: -20px;
    margin-bottom: 20px;
    margin-left: 90px;
}
</style>
<script>
import Vue from 'vue';
import { abc } from "../../../../js/abc.js";
import {potUrl} from '../../../../js/config_url.js'; 
import uploadCom from '../../pop/upload.vue';
let a = null;
export default {
    components:{
        uploadCom
    },
    data () {
    return {
        searchparams:'',
        tableData:[],
        total:50,
        size:20,
        pageNum:1,
        searchinfo:[],
        editTitle:'',
        edit_show:false,
        editForm:{remarks:''},
        headData:{},
        liclicked:false,//点击搜索的li;
        countnum:'',
    }
  }, 
   mounted(){
      let that = this;
      that.getList()
  },
  watch:{
      searchparams(n,o){
          let that = this;
          if(that.liclicked){
              return
          }
          abc.get(that,potUrl.itemSearch,{keyword:n},(res)=>{
              that.searchinfo = res.data
          })
      }  
  },
  methods:{
    search(){
        let that = this;
        //搜索有问题，搜索2019-03数据和2019-04数据是一样的；-error
        abc.get(that,potUrl.refundsearch,that.form,(data)=>{
            that.tableData = data.data
        })
    },
    changePage(val){
        var that = this;
        that.pageNum = val;
        that.form.page = val;
        that.getList()
    },
    getList(){
        let that = this;
        abc.get(that,potUrl.stockrecords,{},(res)=>{
            that.liclicked = false;
            that.tableData=res.data;
            that.total = res.data.length;
        })//列表
    },
    theClick(a){
        const that = this;
        if(a == 'in'){
            that.editTitle = '入库'
        }else if(a == 'out'){
            that.editTitle = '出库'
        }else{
            that.editTitle = '损耗'
        }
        
        that.edit_show = true;
        that.countnum = that.headData.item_num;
    },
    confrim(){
        const that = this;
        let url = ''
        if(that.editTitle == '入库'){
            url = potUrl.stockplus
        }else if(that.editTitle == '出库'){
            url = potUrl.stockreduce
        }else{
            url = potUrl.stockloss;
            
        }
        abc.post(that,url,that.editForm,(res)=>{
            that.edit_show = false;
            that.getList()
        })
    },
    chooseLi(a){
        const that = this;
        that.headData = a;
        that.searchparams = a.item_name;
        that.editForm.item_id = a.item_id;
        that.liclicked = true;
        that.searchinfo = {}
    },
    countstock(){
        const that = this;
        if(that.editForm.stock == '' || that.editForm.stock == undefined){
            that.countnum = parseInt(that.headData.item_num) 
        }else{
            if(that.editTitle == '入库'){
                that.countnum = parseInt(that.editForm.stock)  + parseInt(that.headData.item_num) 
            }else{
                that.countnum = parseInt(that.headData.item_num) - parseInt(that.editForm.stock)
            }
            
        }
        
    },
    getInputval(data){
        console.log(data)
        this.editForm.bill_image = data
    }
  }
}
</script>
